<template>
  <div class="wrapper">
    <div class="form">
      <div class="item">
        <span>收件人</span>
        <input type="text" v-model="name" placeholder="收件人">
      </div>
      <div class="item">
        <span>联系电话</span>
        <input type="tel" v-model="mobile" placeholder="联系电话">
      </div>
      <div class="item" @click="show = true">
        <span>所在城市</span>
        <p v-if="!area">请选择</p>
        <p v-else>
          {{ province }}{{ city }}{{ area }}
        </p>
      </div>
      <div class="item">
        <span>详细地址</span>
        <input type="text" v-model="address" placeholder="街道,楼牌号等">
      </div>
      <div class="item" @click="isDefault = !isDefault">
        <span>设置默认地址</span>
        <div class="circle-wrapper">
          <div class="circle">
            <div class="inner" v-show="isDefault"></div>
          </div>
        </div>
      </div>
    </div>
    <button class="submit" @click="submit">提交</button>
    <transition name="slide">
      <div class="slide" v-show="show">
        <VDistpicker type="mobile" :province="province" :city="city" :area="area" @selected="selected"></VDistpicker>
      </div>
    </transition>
    <MaskView v-show="show" @click.native="show = false"></MaskView>
  </div>
</template>

<script>
  import _ from 'lodash'
  import VDistpicker from 'v-distpicker'
  import MaskView from '@/components/mask/Mask.vue'
  import { mapState } from 'vuex'
  export default {
    name: 'AddressDetail',
    components: {
      VDistpicker,
      MaskView
    },
    created() {
      if(this.$route.params.id != 'none') {
        this._get()
      }
    },
    data() {
      return {
        isDefault: false,
        show: false,
        name: '',
        mobile: '',
        province: '',
        city: '',
        area: '',
        address: ''
      }
    },
    computed: {
      ...mapState(['openId']),
      api() {
        return this.$route.params.id == 'none' ? 'increase' : 'modify'
      }
    },
    methods: {
      selected(data) {
        this.province = data.province.value
        this.city = data.city.value
        this.area = data.area.value
        const pLength = this.province.length
        const CLength = this.city.length
        const ALength = this.area.length
        if(pLength != 1 && CLength != 1 & ALength != 1) {
          this.show = false
        }
      },
      async _get() {
        let { data: { code, data} } = await this.$axios({
          url: '/v1/address/show',
          method: 'get',
          params: {
            id: this.$route.params.id,
            openid: this.openId
          }
        })
        if(code === 0) {
          this.name = data.name
          this.mobile = data.mobile
          this.province = data.province
          this.city = data.city
          this.area = data.district
          this.address = data.address
          this.isDefault = data.is_default == '0'
        }
      },
      submit: _.throttle(async function() {
        let mobile = /^1(3|4|5|6|7|8|9)\d{9}$/
        if(!this.name) {
          this.$toast('请填写收件人')
          return
        }
        if(!this.mobile) {
          this.$toast('手机号不能为空')
          return
        } else if (!mobile.test(this.mobile)) {
          this.$toast('请正确填写手机号')
          return
        }
        if(!this.province && !this.city && !this.area) {
          this.$toast('请选择所在城市')
          return
        }
        if(!this.address) {
          this.$toast('请填写详细地址')
          return
        }
        let { data: { code, data} } = await this.$axios({
          url: '/v1/address/' + this.api,
          method: 'POST',
          data: {
            name: this.name,
            mobile: this.mobile,
            province: this.province,
            city: this.city,
            district: this.area,
            address: this.address,
            id: this.$route.params.id !== 'none' ? this.$route.params.id : '',
            openid: this.openId
          }
        })
        if(code === 0) {
          if(this.isDefault) {
            this._setDefault(data)
          } else {
            this.$toast('操作成功')
            setTimeout(() => {
              this.$router.go(-1)
            }, 1000)
          }
        }
      },2000,{
        trailing: false
      }),
      async _setDefault(id) {
        let { data: { code } } = await this.$axios({
          url: '/v1/address/default',
          method: 'POST',
          data: {
            id: this.$route.params.id !== 'none' ? this.$route.params.id : id,
            openid: this.openId
          }
        })
        if(code === 0) {
          this.$toast('操作成功')
          setTimeout(() => {
            this.$router.go(-1)
          }, 1000)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/base.scss';
  .slide-enter, .slide-leave-to {
    transform: translate3d(0, 100%, 0);
  }
  .slide-enter-active, .slide-leave-active {
    transition: all 0.2s linear;
  }
  .wrapper {
    min-height:100vh;
    padding-bottom: 0.2rem;
    background: #eee;
  }
  .form {
    padding: 0 0.2rem;
    font-size: 0.24rem;
    background: #fff;
  }
  .item {
    display: flex;
    align-items: center;
    padding: 0.2rem 0;
    border-bottom: 1px solid $bgGray;
    span {
      display: block;
      flex: 0 0 1.6rem;
      width: 1.6rem;
    }
    input {
      flex: 1;
      display: block;
      font-size: 0.24rem;
    }
    p {
      flex: 1;
    }
    .circle-wrapper {
      flex: 1;
      text-align: right;
      .circle {
        display: inline-block;
        position: relative;
        width: 0.4rem;
        height: 0.4rem;
        border: 1px solid $colorGray;
        border-radius: 50%;
        .inner {
          position: absolute;
          width: 0.3rem;
          height: 0.3rem;
          border-radius: 50%;
          @include center;
          background: $colorRed;
        }
      }
    }
  }
  .submit {
    display: block;
    margin: 0.4rem auto;
    padding: 0.2rem;
    width: 80%;
    border-radius: 5px;
    border:none;
    color: #fff;
    background: $colorRed;
    font-size: 0.28rem;
  }
  .slide {
    position: fixed;
    width: 100%;
    height: 8rem;
    background: #fff;
    overflow-y: scroll;
    bottom: 0;
    z-index: 11;
  }
  .distpicker-address-wrapper {
    font-size: 0.28rem;
  }
</style>
